<template>
  <view class="article-page">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-input-box">
        <image src="/static/image/icon_search.png" class="search-icon" mode="aspectFit"></image>
        <input
          class="search-input"
          v-model="searchKeyword"
          placeholder="搜索资讯标题或内容"
          @confirm="handleSearch"
        />
        <text class="search-btn" @click="handleSearch">搜索</text>
      </view>
    </view>

    <!-- 筛选栏 -->
<!--    <view class="filter-bar">-->
<!--      <view class="filter-tabs">-->
<!--        <view-->
<!--          class="filter-tab"-->
<!--          :class="{ 'active': currentFilter === 'all' }"-->
<!--          @click="changeFilter('all')"-->
<!--        >-->
<!--          <text class="tab-text">全部</text>-->
<!--        </view>-->
<!--        <view-->
<!--          class="filter-tab"-->
<!--          :class="{ 'active': currentFilter === 'hot' }"-->
<!--          @click="changeFilter('hot')"-->
<!--        >-->
<!--          <text class="tab-text">热门</text>-->
<!--        </view>-->
<!--        <view-->
<!--          class="filter-tab"-->
<!--          :class="{ 'active': currentFilter === 'latest' }"-->
<!--          @click="changeFilter('latest')"-->
<!--        >-->
<!--          <text class="tab-text">最新</text>-->
<!--        </view>-->
<!--      </view>-->
<!--    </view>-->

    <!-- 资讯列表 -->
    <view class="article-list">
      <view
        class="article-item"
        v-for="(item, index) in articleList"
        :key="index"
        @click="viewArticleDetail(item)"
      >
        <view class="article-content">
          <text class="article-title">{{ item.title }}</text>
          <view class="article-author">
            <image :src="item.avatar || '/static/default_user.png'" class="author-avatar" mode="aspectFill"></image>
            <text class="author-name">{{ item.author }}</text>
          </view>
          <text class="article-desc">{{ item.summary }}</text>
          <view class="article-footer">
            <view class="time-info">
              <image src="/static/info/time.png" class="time-icon" mode="aspectFit"></image>
              <text class="time-text">{{ item.publish_time }}</text>
            </view>
            <view class="article-stats">
              <text class="read-count">阅读量 {{ item.view_count }}</text>
            </view>
          </view>
        </view>
        <view class="article-image" v-if="item.image">
          <image :src="item.image" class="cover-image" mode="aspectFill"></image>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <view class="load-more" v-if="hasMore">
      <text class="load-text" @click="loadMore">加载更多</text>
    </view>

    <!-- 无更多数据 -->
    <view class="no-more" v-if="!hasMore && articleList.length > 0">
      <text class="no-more-text">没有更多数据了</text>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="articleList.length === 0 && !loading">
<!--      <image src="/static/image/no_permission.png" class="empty-icon" mode="aspectFit"></image>-->
      <text class="empty-text">暂无相关资讯</text>
    </view>

    <!-- 加载中 -->
    <view class="loading-state" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</template>

<script>
import Navbar from "../../components/Navbar.vue";

export default {
  components: { Navbar },
  data() {
    return {
      // 搜索关键词
      searchKeyword: '',
      // 当前筛选条件
      currentFilter: 'all',
      // 文章列表
      articleList: [],
      // 分页参数
      page: 1,
      pageSize: 10,
      // 是否还有更多数据
      hasMore: false,
      // 是否正在加载
      loading: false,
      // 筛选选项
      filterOptions: {
        all: { name: '全部', value: 'all' },
        hot: { name: '热门', value: 'hot' },
        latest: { name: '最新', value: 'latest' }
      }
    }
  },
  onLoad(options) {
    // 如果有搜索关键词参数，设置搜索关键词
    if (options.keyword) {
      this.searchKeyword = options.keyword;
    }
    // 加载文章列表
    this.loadArticleList();
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.refreshList();
  },
  // 上拉加载更多
  onReachBottom() {
    if (this.hasMore && !this.loading) {
      this.loadMore();
    }
  },
  methods: {
    // 处理搜索
    handleSearch() {
      this.page = 1;
      this.articleList = [];
      this.hasMore = true;
      this.loadArticleList();
    },

    // 切换筛选条件
    changeFilter(filter) {
      if (this.currentFilter === filter) return;

      this.currentFilter = filter;
      this.page = 1;
      this.articleList = [];
      this.hasMore = true;
      this.loadArticleList();
    },

    // 加载文章列表
    async loadArticleList() {
      if (this.loading) return;

      this.loading = true;

      try {
        // 模拟API调用
        const params = {
          pageNo: this.page,
          pageSize: this.pageSize,
          title: this.searchKeyword,
        };

        // 这里应该调用真实的API
        const response = await this.$api.getArticlePage(params);

        if (this.page === 1) {
          this.articleList = response.list;
        } else {
          this.articleList = [...this.articleList, ...response.list];
        }

        this.hasMore = response.data.length === this.pageSize;

      } finally {
        this.loading = false;
        uni.stopPullDownRefresh();
      }
    },

    // 加载更多
    loadMore() {
      if (this.hasMore && !this.loading) {
        this.page++;
        this.loadArticleList();
      }
    },

    // 刷新列表
    refreshList() {
      this.page = 1;
      this.articleList = [];
      this.hasMore = true;
      this.loadArticleList();
    },

    // 查看文章详情
    viewArticleDetail(item) {
      uni.navigateTo({
        url: `/pages/article/detail?id=${item.id}`
      });
    },

    // 模拟API调用
    mockApiCall(params) {
      return new Promise((resolve) => {
        setTimeout(() => {
          // 模拟数据
          const mockData = [
            {
              id: 1,
              title: '文章资讯标题可以最多这么长文案这么长文案这么长文案这么长文案...',
              author: 'Ocean',
              avatar: '/static/image_副本/user_avatar.png',
              description: '文章简介可以这么长这么长这么长这么长这么长这么长这么长这么长...',
              time: '1小时前',
              readCount: 1980,
              likeCount: 156,
              image: '/static/image_副本/mine_bg.png'
            },
            {
              id: 2,
              title: '另一篇文章标题也很长很长很长很长很长很长很长很长很长很长...',
              author: '蜜罐子',
              avatar: '/static/image_副本/user_avatar.png',
              description: '另一篇文章的简介内容也很长很长很长很长很长很长很长很长很长...',
              time: '2小时前',
              readCount: 1560,
              likeCount: 89,
              image: '/static/image_副本/default_service.png'
            },
            {
              id: 3,
              title: '第三篇文章标题同样很长很长很长很长很长很长很长很长很长很长...',
              author: '技术专家',
              avatar: '/static/image_副本/user_avatar.png',
              description: '第三篇文章的简介内容同样很长很长很长很长很长很长很长很长很长...',
              time: '3小时前',
              readCount: 2340,
              likeCount: 234,
              image: null
            }
          ];

          // 根据筛选条件过滤数据
          let filteredData = [...mockData];

          if (params.keyword) {
            filteredData = filteredData.filter(item =>
              item.title.includes(params.keyword) ||
              item.description.includes(params.keyword)
            );
          }

          if (params.filter === 'hot') {
            filteredData.sort((a, b) => b.readCount - a.readCount);
          } else if (params.filter === 'latest') {
            filteredData.sort((a, b) => {
              const timeA = this.parseTime(a.time);
              const timeB = this.parseTime(b.time);
              return timeB - timeA;
            });
          }

          // 模拟分页
          const start = (params.page - 1) * params.pageSize;
          const end = start + params.pageSize;
          const pageData = filteredData.slice(start, end);

          resolve({
            data: pageData,
            total: filteredData.length
          });
        }, 500);
      });
    },

    // 解析时间字符串为时间戳（用于排序）
    parseTime(timeStr) {
      const now = new Date();
      if (timeStr.includes('小时前')) {
        const hours = parseInt(timeStr);
        return now.getTime() - hours * 60 * 60 * 1000;
      } else if (timeStr.includes('分钟前')) {
        const minutes = parseInt(timeStr);
        return now.getTime() - minutes * 60 * 1000;
      }
      return now.getTime();
    }
  }
}
</script>

<style lang="scss" scoped>
.article-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 60rpx;
}

// 搜索栏样式
.search-bar {
  background: #fff;
  padding: 24rpx;
  border-bottom: 1rpx solid #f0f0f0;

  .search-input-box {
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 32rpx;
    padding: 16rpx 24rpx;

    .search-icon {
      width: 32rpx;
      height: 32rpx;
      margin-right: 16rpx;
    }

    .search-input {
      flex: 1;
      font-size: 28rpx;
      color: #333;
      background: transparent;
      border: none;
      outline: none;
    }

    .search-btn {
      font-size: 28rpx;
      color: #539DF3;
      padding-left: 16rpx;
    }
  }
}

// 筛选栏样式
.filter-bar {
  background: #fff;
  padding: 24rpx;
  border-bottom: 1rpx solid #f0f0f0;

  .filter-tabs {
    display: flex;
    gap: 32rpx;

    .filter-tab {
      padding: 12rpx 24rpx;
      border-radius: 24rpx;
      background: #f5f5f5;
      transition: all 0.3s ease;

      &.active {
        background: #539DF3;

        .tab-text {
          color: #fff;
        }
      }

      .tab-text {
        font-size: 28rpx;
        color: #666;
      }
    }
  }
}

// 文章列表样式
.article-list {
  padding: 24rpx;

  .article-item {
    background: #fff;
    border-radius: 16rpx;
    padding: 32rpx;
    margin-bottom: 24rpx;
    display: flex;
    gap: 24rpx;

    .article-content {
      flex: 1;
      display: flex;
      flex-direction: column;

      .article-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        line-height: 1.4;
        margin-bottom: 16rpx;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .article-author {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;

        .author-avatar {
          width: 48rpx;
          height: 48rpx;
          border-radius: 24rpx;
          margin-right: 12rpx;
        }

        .author-name {
          font-size: 26rpx;
          color: #666;
        }
      }

      .article-desc {
        font-size: 28rpx;
        color: #666;
        line-height: 1.4;
        margin-bottom: 16rpx;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .article-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .time-info {
          display: flex;
          align-items: center;

          .time-icon {
            width: 24rpx;
            height: 24rpx;
            margin-right: 8rpx;
          }

          .time-text {
            font-size: 24rpx;
            color: #999;
          }
        }

        .article-stats {
          display: flex;
          gap: 16rpx;

          .read-count,
          .like-count {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
    }

    .article-image {
      width: 160rpx;
      height: 120rpx;
      border-radius: 12rpx;
      overflow: hidden;
      flex-shrink: 0;

      .cover-image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

// 加载更多样式
.load-more {
  text-align: center;
  padding: 32rpx;

  .load-text {
    font-size: 28rpx;
    color: #539DF3;
  }
}

// 无更多数据样式
.no-more {
  text-align: center;
  padding: 32rpx;

  .no-more-text {
    font-size: 28rpx;
    color: #999;
  }
}

// 空状态样式
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 32rpx;

  .empty-icon {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 32rpx;
  }

  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}

// 加载中样式
.loading-state {
  text-align: center;
  padding: 32rpx;

  .loading-text {
    font-size: 28rpx;
    color: #999;
  }
}
</style>
